// import React,{useState} from "react";
import React from "react";
// 引入Outlet组件,用于显示子路由的内容
import { Outlet } from 'react-router-dom';
// 引入antd组件 
// import {
//     MenuFoldOutlined,
//     MenuUnfoldOutlined,
//     UploadOutlined,
//     UserOutlined,
//     VideoCameraOutlined,
//   } from '@ant-design/icons';
  import { Button, Layout, Menu, theme} from 'antd';
  import CommonAside from '../components/commonAside';
  import CommonHeader from '../components/commonHeader';
//   导入react-redux中获取状态的方法
  import { useSelector } from 'react-redux'
  import { RouterAuth } from '../router/routerAuth'

  const { Header, Sider, Content } = Layout;
  const Main = () => {
    // 获取展开收起的状态
    const collapsed = useSelector(state => state.tab.isCollapse)
    // 涉及到跨组件通信，暂时去除
    // const [collapsed, setCollapsed] = useState(false);
    const {
      token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <RouterAuth>
        <Layout className="main-container">
            {/* 这部分独立出去的侧边栏组件 */}
          {/* <Sider trigger={null} collapsible collapsed={collapsed}>
            <h3 className="app-name">通用后台管理系统</h3>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              items={[
                {
                  key: '1',
                  icon: <UserOutlined />,
                  label: 'nav 1',
                },
                {
                  key: '2',
                  icon: <VideoCameraOutlined />,
                  label: 'nav 2',
                },
                {
                  key: '3',
                  icon: <UploadOutlined />,
                  label: 'nav 3',
                },
              ]}
              style={{
                height:'100%'
              }}
            />
          </Sider> */}
          <CommonAside collapsed={collapsed} />
          <Layout>
            {/* <Header style={{ padding: 0, background: colorBgContainer }}>
              <Button
                type="text"
                // icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                // onClick={() => setCollapsed(!collapsed)}
                style={{
                  fontSize: '16px',
                  width: 64,
                  height: 64,
                }}
              />
            </Header> */}
            <CommonHeader collapsed={collapsed}/>
            <Content
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet />
            </Content>
          </Layout>
        </Layout>
        </RouterAuth>
      );
}
export default Main;